import React from 'react'
import http from '../../utils/http'
// import styles from './index.module.css'
import { ProductCard, SubmitBar } from 'react-vant'
import { NavBar, List } from 'antd-mobile'
import { useLocation, useNavigate } from 'react-router-dom'
import { ShopbagOutline, SystemQRcodeOutline } from 'antd-mobile-icons'
function Index() {
    const { state } = useLocation()
    console.log(state);

    const navigate = useNavigate()

    const onSubmit = async () => {
        const res = await http.get('/api//pay', {
            params: {
                title: '订单支付',
                id: state.id,
                price: state.price
            }
        })

        const { data } = res.data

        window.location.href = data
    }
    return (
        <div>
            <NavBar onBack={() => navigate(-1)}>订单详情页</NavBar>
            <div>
                <ProductCard
                    price={<div><SystemQRcodeOutline />10:00 Pm-12:00 Pm</div>}
                    desc={<div><ShopbagOutline />{state.date}</div>}
                    title={state.title}
                    thumb={state.image}
                />
            </div>
            <div>
                <h2>订单明细</h2>
                <div>
                    <List>
                        <List.Item extra={<span>￥{state.price}</span>}>票价</List.Item>
                        <List.Item extra={<span>￥0</span>}>平台手续费</List.Item>
                        <List.Item extra={<span>￥{state.price}</span>}>总计</List.Item>
                    </List>
                </div>
            </div>
            <div>
                <SubmitBar textAlign='left' label=' ' price={state.price * 100} onSubmit={() => onSubmit()} buttonText="立即购票" />
            </div>
        </div>
    )
}

export default Index
